<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Automation Framework Test Suite</title>
    <style>
        .pagination {
            margin: 20px;
        }

        .page-link {
            padding: 5px 10px;
            margin: 0 2px;
            cursor: pointer;
        }

        .post {
            border: 1px solid #ddd;
            padding: 15px;
            margin: 10px 0;
        }

        .comments {
            display: none;
            margin-left: 20px;
            border-left: 3px solid #eee;
            padding: 10px;
        }

        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 20px auto;
            display: none;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <!-- 分页导航 -->
    <div class="pagination" id="pagination">
        Page: <span id="currentPage">1</span>
        <button onclick="changePage(-1)">Previous</button>
        <button onclick="changePage(1)">Next</button>
    </div>

    <!-- 主内容区 -->
    <div id="content">
        <!-- 帖子列表通过JS动态生成 -->
    </div>

    <!-- 加载指示器 -->
    <div class="loader" id="loader"></div>

    <!-- 隐藏的延迟加载区域 -->
    <div id="hiddenSection" style="display:none;">
        <button onclick="loadSecretContent()">加载隐藏内容</button>
        <div id="secretContent"></div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js"
        integrity="sha512-qtX0GLM3qX8rxJN1gyDfcnMFFrKvixfoEOwbBib9VafR5vbChV5LeE5wSI/x+IlCkTY5ZFddFDCCfaVJJNnuKQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        // 模拟数据库
        let mockDB = {
            posts: Array.from({ length: 100 }, (_, i) => ({
                id: i + 1,
                title: `Post ${i + 1}`,
                content: `Content for post ${i + 1}`,
                comments: Array.from({ length: 3 }, (_, j) =>
                    `Comment ${j + 1} for post ${i + 1}`
                )
            })),

            getPosts(page = 1, pageSize = 5) {
                const start = (page - 1) * pageSize
                return this.posts.slice(start, start + pageSize)
            },

            getComments(postId) {
                return new Promise(resolve => {
                    setTimeout(() => {
                        resolve(this.posts.find(p => p.id === postId).comments)
                    }, Math.random() * 1000)
                })
            }
        }

        // 当前页面状态
        let state = {
            currentPage: 1,
            loading: false
        }

        // 渲染帖子列表
        function renderPosts() {
            const content = document.getElementById('content')
            content.innerHTML = mockDB.getPosts(state.currentPage)
                .map(post => `
                    <div class="post" data-postid="${post.id}">
                        <h3 onclick="toggleComments(${post.id})">${post.title}</h3>
                        <p>${post.content}</p>
                        <div class="comments" id="comments-${post.id}"></div>
                    </div>
                `).join('')
            document.getElementById('currentPage').textContent = state.currentPage
        }

        // 更新分页函数
        function changePage(delta) {
            const totalPages = Math.ceil(mockDB.posts.length / 5);
            const newPage = state.currentPage + delta;
            if (newPage < 1 || newPage > totalPages) return;
            state.currentPage = newPage;
            renderPosts();
        }

        // 评论交互
        async function toggleComments(postId) {
            const container = document.getElementById(`comments-${postId}`)
            if (container.children.length === 0) {
                showLoader()
                const comments = await mockDB.getComments(postId)
                container.innerHTML = comments.map(c => `<p>${c}</p>`).join('')
                hideLoader()
            }
            container.style.display = container.style.display === 'none' ? 'block' : 'none'
        }

        // 滚动加载
        let loading = false
        window.onscroll = async () => {
            if (state.loading) return;
            const totalPages = Math.ceil(mockDB.posts.length / 5);

            // 添加50px阈值以提前触发加载
            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 5) {
                state.loading = true;
                showLoader();

                // 模拟网络延迟
                await new Promise(r => setTimeout(r, 500));

                if (state.currentPage < totalPages) {
                    // 加载现有数据的下一页
                    state.currentPage++;
                } else {
                    // 生成新数据并扩展数据库
                    const newPosts = Array.from({ length: 5 }, (_, i) => ({
                        id: mockDB.posts.length + i + 1,
                        title: `Dynamic Post ${mockDB.posts.length + i + 1}`,
                        content: `Auto-loaded content`,
                        comments: Array.from({ length: 3 }, (_, j) =>
                            `Comment ${j + 1} for post ${mockDB.posts.length + i + 1}`
                        )
                    }));
                    mockDB.posts.push(...newPosts);
                    state.currentPage++;
                }

                renderPosts();
                state.loading = false;
                hideLoader();
            }
        };


        function loadMorePosts() {
            const newPosts = Array.from({ length: 5 }, (_, i) => ({
                id: state.currentPage * 5 + i + 1,
                title: `Dynamic Post ${state.currentPage * 5 + i + 1}`,
                content: `Auto-loaded content`
            }))
            mockDB.posts.push(...newPosts)
            renderPosts()
        }

        // 工具函数
        function showLoader() {
            document.getElementById('loader').style.display = 'block'
        }

        function hideLoader() {
            document.getElementById('loader').style.display = 'none'
        }

        // 初始化
        renderPosts()
        setTimeout(() => {
            document.getElementById('hiddenSection').style.display = 'block'
        }, 5000)

        // Mock API
        window.mockAPI = {
            fetchData: () => new Promise(resolve => {
                setTimeout(() => resolve({
                    data: Array.from({ length: 5 }, (_, i) =>
                        `API Item ${i + 1}`
                    )
                }), 1500)
            })
        }
    </script>
</body>

</html>